import { ExtractPropTypes, PropType } from "vue"
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * 分段器数据类型
 */
export type SubSectionData = {
  /** 名称 */
  name: string,
  /** 禁用状态 */
  disabled?: boolean
}

/**
 * props参数
 */
export const subsectionProps = {
  /** modelValue, 当前选中的index */
  modelValue: {
    type: Number,
    default: 0
  },
  /** item数据 */
  data: {
    type: Array as PropType<Array<SubSectionData>>,
    default: (): SubSectionData[] => {
      return []
    }
  },
  /** 分段器高度, 单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 激活时的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 自定义圆角的值, 单位rpx */
  borderRadius: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  }
}
export type SubsectionProps = ExtractPropTypes<typeof subsectionProps>

export const subsectionEmits = {
  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',
  change: (value: number) => typeof value === 'number'
}
export type SubsectionEmits = typeof subsectionEmits
